<template>
    <div id="app">
        <!-- router-link就是一个导航组件,类似于a标签 -->
        <router-link to="/home">主页</router-link>
        |
        <router-link to="/discover">发现</router-link>
        |
        <router-link to="/friend">监狱风云</router-link>
        |
        <router-link to="/goods">商品</router-link>
        |
        <router-link to="/count">计数器</router-link>
        |
        <router-link to="/gouwuche">购物车</router-link>
        |
        <router-link to="/axios">axios的使用</router-link>
        |
        <button @click="jump">一个朴实无华的按钮</button>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        methods: {
            jump() {
                // 编程式导航,使用js逻辑来控制路由的跳转,而不是使用router-link组件跳转

                //1.push 向浏览器历史记录栈中压入一个记录
                //直接传入路径
                // this.$router.push("/discover")
                //传入对象 通过路径跳转
                // this.$router.push({ path: "/discover" })
                //传入对象,使用名字跳转
                // this.$router.push({name:"toplist"})
                //参数的传递 query params,这两种传参有什么区别?query刷新页面不会丢失,params刷新页面会丢失
                // this.$router.push({ path: "/home", query: { song: "惊雷" } })
                // 直接传递传递params的时候,需要使用name来进行跳转,不然传递是不成功的
                // this.$router.push({ name: "home", params: { song: "惊雷" } })

                // 历史记录:[http://localhost:8080/#/,http://localhost:8080/#/goods,http://localhost:8080/#/discover/toplist]

                //replcae 替换掉上个历史记录

                //和push的用法是一摸一样,一个区别就是,会替换掉上一个历史记录,访问不会产生历史记录

                // this.$router.replace('/discover')

                //go(number) 去到第几个历史记录,以当前的历史记录为原点,当前就是0,左边的历史记录就是负值 右边的是正值

                // this.$router.go(-1)

                //forward 前进 相当于点击了浏览器历史记录的前进按钮

                //back 后退 相当于点击了浏览器历史记录的后退按钮

                console.log(this.$router)
            }
        }
    }
</script>